
<%@ page contentType="text/html;charset=UTF-8" %>

<!DOCTYPE html>
<html>
  <head>
    <title>MUsgo Vive la Musica</title>

      <link rel="stylesheet" type="text/css" href="${resource(dir: 'css', file: 'estructuraFondo.css')}" />
      <link rel="stylesheet" type="text/css" href="${resource(dir: 'css', file: 'grid.css')}" />
      <link rel="stylesheet" type="text/css" href="${resource(dir: 'css', file: 'formularioNick.css')}" />
      <link rel="stylesheet" type="text/css" href="${resource(dir: 'css', file: 'menus.css')}" />

      <g:javascript src="jquery-1.8.2.js" />
        <script type="text/javascript">

          function mostrarLogin(){
	
            $('#login_invisible').show(1500);
            $('#quienes_invisible').hide(1500);
            $('#registropass_invisible').hide(1500);
            $('#cancionmes').hide(1500);
           $('#yaestaregistrado').hide(1500);

          }
          function mostrarRegistro(){
            if(${session.nick== null}){
          
              $('#registropass_invisible').show(1500);
              $('#quienes_invisible').hide(1500);
              $('#login_invisible').hide(1500);
              $('#cancionmes').hide(1500);
          }else{
           $('#yaestaregistrado').show(1500);
          }
         }
         function mostrarQuienes(){
            $('#quienes_invisible').show(1500);
            $('#login_invisible').hide(1500);
            $('#registropass_invisible').hide(1500);
            $('#cancionmes').hide(1500);
             $('#yaestaregistrado').hide(1500);

        }

        function guardarlogin(){
          $('#login_invisible').hide(1500);

}

</script>
<script>
  pw_min = 5; // caracteres minimos para validar
  pw_max = 20; // caracteres maximos para validar
  pw_invalid = 'red'; // color de password invalido
  pw_insecure = 'yellow'; // color de password valido pero inseguro
  pw_secure = 'green'; // color de password valido y seguro
  pw_validate = /^[a-z0-9]+$/i; // regexp para validar password

  document.onkeyup = function() {
   if (typeof pw_focus != 'undefined') {
    if (pw_focus.value.length < pw_min || pw_focus.value.length > pw_max) bcolor = pw_invalid;
    else if (!pw_validate.test(pw_focus.value)) bcolor = pw_invalid;
    else if (pw_focus.value.toLowerCase() == pw_focus.value || pw_focus.value.toUpperCase() == pw_focus.value) bcolor = pw_insecure;
    else if (/^[a-z]+$/i.test(pw_focus.value) || /^[0-9]+$/i.test(pw_focus.value)) bcolor = pw_insecure;
    else bcolor = pw_secure;
    pw_focus.style.backgroundColor = bcolor;
   }
  }
  window.onload = function() {
   var inputs = document.getElementsByTagName('input');
   for (i = 0; i < inputs.length; i++) {
    if (inputs[i].type == 'password') {
     inputs[i].onfocus = function() {
      pw_focus = this;
     }
     inputs[i].onblur = function() {
      delete pw_focus;
     }
    }
   }
  }
</script>

  </head>
<body>
    <div id="wrapper">
        <div id="headerwrap">
        <div id="header">
           
            <g:img dir="images/imgProyecto" file="b.PNG" />
        </div>
        </div>
        <div id="navigationwrap">
        
            <div id='cssmenu'>
                        <ul>
  				 	<li class='active '><a href='/MusgoSoft/home/index'><span>&nbsp;&nbsp;&nbsp;  Home &nbsp;&nbsp;&nbsp;</span></a></li>
   					<li class='has-sub '><a href='#'><span>&nbsp;&nbsp;&nbsp;  Musgo &nbsp;&nbsp;&nbsp;</span></a>
      			<ul>
         			<li><a href='#' onclick="mostrarQuienes()"><span>Quienes somos</span></a></li>
         			
      			</ul>
   			</li>
   			<li><a href='/MusgoSoft/home/eventos'><span>&nbsp;&nbsp;&nbsp;  Eventos&nbsp;&nbsp;&nbsp;</span></a></li>
   			<li><a href='/MusgoSoft/home/busqueda/1'><span>&nbsp;&nbsp;&nbsp;  Busqueda&nbsp;&nbsp;&nbsp;</span></a></li>
                        <li><a href='http://www.unal.edu.co/'><span>&nbsp;&nbsp;&nbsp;  Destacado&nbsp;&nbsp;&nbsp;</span></a></li>
   			<li><a href='/MusgoSoft/home/contacto'><span>&nbsp;&nbsp;&nbsp;  Contacto&nbsp;&nbsp;</span></a></li>
                        <li><g:link controller="artista" action="profile" params="[nick:"${session.nick}"]">Mi Cuenta</g:link>
                        <li><g:link controller="home" action="logout" >LogOut</g:link>
                      </ul>
            </div>
        
        </div>
        <div id="leftcolumnwrap">
        <div id="leftcolumn">
        
        <div id="button-box">
    		<br><br>
    		<a href="#" class="button" onclick="mostrarLogin()">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; LOGIN &nbsp;&nbsp;&nbsp;&nbsp; </a>
    	</div>
    	
    	<div id="button-box">
    		<br><br>
    		<a href="#" class="button" onclick="mostrarRegistro()">&nbsp;&nbsp;REGISTRO&nbsp;&nbsp;</a>	
    	</div>
          <br><br>
      <FONT FACE="impact" SIZE="4" >Sesion Actual<br>         
        ${session.nick}</FONT>
        <br><br>
        <g:form>   
          <g:actionSubmitImage value="registro"  action="contacto" src="${resource(dir: 'images/imgProyecto', file: 'proximoevento1.png')}" />  
        </g:form> 
        <br><br>
        </div>
        </div>
        <div id="contentwrap">
          <div id="content">
          
            <div id="cancionmes">
         
              <br><div id="derechafoto">
              <img style="width: 250px; height: 260px;" src="${createLink(controller:"artista",action:'imagen', id:"1")}"/>&nbsp;&nbsp;&nbsp;
        
                  </div><br><br><br><br><br><br><br>
                  
          <g:if test="${cancionvista != null}" >
            <div id="informacionartistames">
                <label id="letrainformacionartista1" >Nombre: </label>
                <label id="letrainformacionartista2">&nbsp;&nbsp;&nbsp;${cancionvista.nombre}</label><br><br>
                <label id="letrainformacionartista1" >Valoracion </label>
                <label id="letrainformacionartista2">&nbsp;&nbsp;&nbsp;${cancionvista.valoracion}</label><br><br>
                <label id="letrainformacionartista1" >Escuchar Cancion  </label>
                <label id="letrainformacionartista2">&nbsp;&nbsp;&nbsp;
                <object type="application/x-shockwave-flash" data="http://help-4-pwg.99k.org/Alls/5758ddewplayer.swf?mp3=/MusgoSoft/home/musicareproduccion/${cancionvista.id}"  width="200" height="20" id="dewplayer">
                <param name="wmode" value="transparent" />
                <param name="movie" value="http://help-4-pwg.99k.org/Alls/5758ddewplayer.swf?mp3=/MusgoSoft/home/musicareproduccion/${cancionvista.nombre}" /></object>
                </label>
        
          </div>
        </g:if>
		
       
          </div>
          
    
        
        <img id="top" src="/MusgoSoft/images/imgProyecto/top.png" alt="">
        
 <!-- ----------------------------------------------------------------------------------------------- -->       
		
	<div id="login_invisible"> <!-- formulario login -->
	
		<h1><a>Untitled Form</a></h1>
		<form id="form_log" class="appnitro"  method="post" action="login">
			<div class="form_description">
			<h2>Login Musgo </h2>
			<p>Bienvenido a Musgo !! Disfruta nuestros servicios.</p>
		</div>						
			<ul >
			
		<li id="li_1" >
		<label class="description" for="element_1">Nick </label>
		<div>
			<input id="element_1" name="nick" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> 
		</li>		<li id="li_2" >
		<label class="description" for="element_2">Password </label>
		<div>
			<input id="element_2" name="password"  type="password" maxlength="100" value=""/> 
		</div> 
		</li>
			
					<li class="buttons">
			    <input type="hidden" name="form_id" value="log" />
			    
				<g:actionSubmit value="Entrar" action="login"/>
                                <input name="cancelar" type="button" value="Cancelar" onclick="guardarlogin()" />
                               
		</li>
			</ul>
		</form>	
		
	</div><!-- formulario login-->
	
<!-- ---------------------------------------------------------------------------------------------------- -->
	<div id="registropass_invisible"> <!-- formulario registro nick pass -->
	
		<h1><a>Untitled Form</a></h1>
		<form id="form_registro" class="appnitro"  method="post" action="registro" enctype="multipart/form-data">
			<div class="form_description">
			<h2>REGISTRO MUSGO </h2>
			<p>Ingresa los datos requeridos, unete y disfrutar de nuestros servicios!  </p>
		</div>						
			<ul >
			
		<li id="li_1" >
		<label class="description" for="element_1">Nick </label>
		<div>
			<input id="element_1" name="nick" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> <p class="guidelines" id="guide_1"><small>Tamaño del nick de 5 a 40 caracteres</small></p>
		</li>		<li id="li_2" >
		<label class="description" for="element_2">Password </label>
		<div>
			<input id="element_2" name="password"  type="password" maxlength="100" value=""/> 
		</div> <p class="guidelines" id="guide_1"><small>Tamaño del password de 5 a 40 caracteres</small></p>
		</li>		<li id="li_3" >
		<label class="description" for="element_3">Nombre del Artista o Grupo </label>
		<div>
			<input id="element_3" name="nombre" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> 
		</li>		<li id="li_4" >
		<label class="description" for="element_4">Email </label>
		<div>
			<input id="element_4" name="email" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> <p class="guidelines" id="guide_1"><small>emailabcd.com</small></p>
		</li>		<li id="li_5" >
		<label class="description" for="element_5">Pais </label>
		<div>
			<input id="element_5" name="pais" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> 
		</li>		<li id="li_6" >
		<label class="description" for="element_6">Ciudad </label>
		<div>
			<input id="element_6" name="ciudad" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> 
		</li>		<li id="li_7" >
		<label class="description" for="element_7">Historia </label>
		<div>
			<textarea id="element_7" name="historia" class="element textarea small"></textarea> 
		</div> 
		</li>		<li id="li_8" >
		<label class="description" for="element_8">Integrantes </label>
		<div>
			<textarea id="element_8" name="integrantes" class="element textarea small"></textarea> 
		</div> 
		</li>		<li id="li_9" >
		<label class="description" for="element_9">Foto </label>
		<div>
			<input id="element_9" name="imagenp" class="element file" type="file"/> 
		</div>  
		</li>
			
					<li class="buttons">
			    <input type="hidden" name="form_id" value="registro" />
			    
				<g:actionSubmit value="Registrar" action="registro" />
		</li>
			</ul>
		</form>	
		
	</div><!-- formulario registro nick pass-->
        
           <div id="quienes_invisible"> <!-- formulario registro nick pass -->
	
          Musgo es conformado por cuatro estudiantes de la Universidad Nacional de Colombia quienes 
          decidieron realizar como proyecto para el curso de Ingeniería de Software II, una web para promocionar artistas 
          y agrupaciones musicales tanto nacionales como internacionales; y así permitir que cualquier usuario pueda escuchar
          la música y votar la canciones que se encuentran en la web totalmente gratis y sin registro previo.
        	
	</div><!-- fin quienes-->


            <div id="yaestaregistrado"> 
			 ${session.nick} 
			Usted ya ha iniciado sesión como usuario registrado!!!					
            </div>   
        
        
	
	
	
	
	<img id="bottom" src="/MusgoSoft/images/imgProyecto/bottom501.png" alt="">		
</div><!-- fin login  y artista de l mes -->

<br><br> 
<label id="letraabc" >Lista de canciones </label>

<div id='cssmenu1'>
<ul>
   <li><g:link controller="home" action="busqueda" params="[letra:"A"]">A</g:link>
   <li><g:link controller="home" action="busqueda" params="[letra:"B"]">B</g:link>
   <li><g:link controller="home" action="busqueda" params="[letra:"C"]">C</g:link>
   <li><g:link controller="home" action="busqueda" params="[letra:"D"]">D</g:link>
   <li><g:link controller="home" action="busqueda" params="[letra:"E"]">E</g:link>
   <li><g:link controller="home" action="busqueda" params="[letra:"F"]">F</g:link>
   <li><g:link controller="home" action="busqueda" params="[letra:"G"]">G</g:link>
   <li><g:link controller="home" action="busqueda" params="[letra:"H"]">H</g:link>
   <li><g:link controller="home" action="busqueda" params="[letra:"I"]">I</g:link>
   <li><g:link controller="home" action="busqueda" params="[letra:"J"]">J</g:link>
   <li><g:link controller="home" action="busqueda" params="[letra:"K"]">K</g:link>
   <li><g:link controller="home" action="busqueda" params="[letra:"L"]">L</g:link>
   <li><g:link controller="home" action="busqueda" params="[letra:"M"]">M</g:link>
   <li><g:link controller="home" action="busqueda" params="[letra:"N"]">N</g:link>
   <li><g:link controller="home" action="busqueda" params="[letra:"O"]">O</g:link>
   <li><g:link controller="home" action="busqueda" params="[letra:"P"]">P</g:link>
   <li><g:link controller="home" action="busqueda" params="[letra:"Q"]">Q</g:link>
   <li><g:link controller="home" action="busqueda" params="[letra:"R"]">R</g:link>
   <li><g:link controller="home" action="busqueda" params="[letra:"S"]">S</g:link>
   <li><g:link controller="home" action="busqueda" params="[letra:"T"]">T</g:link>
   <li><g:link controller="home" action="busqueda" params="[letra:"U"]">U</g:link>
   <li><g:link controller="home" action="busqueda" params="[letra:"V"]">V</g:link>
   <li><g:link controller="home" action="busqueda" params="[letra:"W"]">W</g:link>
   <li><g:link controller="home" action="busqueda" params="[letra:"X"]">X</g:link>
   <li><g:link controller="home" action="busqueda" params="[letra:"Y"]">Y</g:link>
   <li><g:link controller="home" action="busqueda" params="[letra:"Z"]">Z</g:link>
   
   
</ul>
</div>
 <br><br> 
 <g:if test="${albunesNuevo[0] != null}">
<font FACE="impact" SIZE="6" COLOR="green">Nuevos Albums </FONT>  <br> <br>        
 <div class="grid">
  <div class="grid-m1"></div>
  <div class="grid-c1">
    <g:link controller="Album" action="show" id="${albunesNuevo[0].id}"><b>${albunesNuevo[0].nombreA} </b></g:link>
    <br><br>
    <img style="width: 130px; height: 130px;" src="${createLink(controller:"artista",action:'imagen', id:"${albunesNuevo[0].imagenA.id}")}"/>
    <br><br>
    <g:link controller="Album" action="show" id="${albunesNuevo[3].id}"><b>${albunesNuevo[3].nombreA} </b></g:link>
       <br><br>
    <img style="width: 130px; height: 130px;" src="${createLink(controller:"artista",action:'imagen', id:"${albunesNuevo[3].imagenA.id}")}"/>
         <br><br>
     <g:link controller="Album" action="show" id="${albunesNuevo[6].id}"><b>${albunesNuevo[6].nombreA} </b></g:link><br><br>
    <img style="width: 130px; height: 130px;" src="${createLink(controller:"artista",action:'imagen', id:"${albunesNuevo[6].imagenA.id}")}"/><br><br>
    
  </div>
  <div class="grid-m2"></div>
  <div class="grid-c2">
   <g:link controller="Album" action="show" id="${albunesNuevo[1].id}"><b>${albunesNuevo[1].nombreA} </b></g:link><br><br>
    <img style="width: 130px; height: 130px;" src="${createLink(controller:"artista",action:'imagen', id:"${albunesNuevo[1].imagenA.id}")}"/><br><br>
       <g:link controller="Album" action="show" id="${albunesNuevo[4].id}"><b>${albunesNuevo[4].nombreA} </b></g:link><br><br>
    <img style="width: 130px; height: 130px;" src="${createLink(controller:"artista",action:'imagen', id:"${albunesNuevo[4].imagenA.id}")}"/><br><br>
       <g:link controller="Album" action="show" id="${albunesNuevo[7].id}"><b>${albunesNuevo[7].nombreA} </b></g:link><br><br>
    <img style="width: 130px; height: 130px;" src="${createLink(controller:"artista",action:'imagen', id:"${albunesNuevo[7].imagenA.id}")}"/><br><br> 
    
    
  </div>
  <div class="grid-m3"></div>
  <div class="grid-c3">
   <g:link controller="Album" action="show" id="${albunesNuevo[2].id}"><b>${albunesNuevo[2].nombreA} </b></g:link><br><br>
     <img style="width: 130px; height: 130px;" src="${createLink(controller:"artista",action:'imagen', id:"${albunesNuevo[2].imagenA.id}")}"/><br><br>
       <g:link controller="Album" action="show" id="${albunesNuevo[5].id}"><b>${albunesNuevo[5].nombreA} </b></g:link><br><br>
    <img style="width: 130px; height: 130px;" src="${createLink(controller:"artista",action:'imagen', id:"${albunesNuevo[5].imagenA.id}")}"/><br><br>
      <g:link controller="Album" action="show" id="${albunesNuevo[8].id}"><b>${albunesNuevo[8].nombreA} </b></g:link><br><br>
    <img style="width: 130px; height: 130px;" src="${createLink(controller:"artista",action:'imagen', id:"${albunesNuevo[8].imagenA.id}")}"/><br><br> 
  </div>
  <br style="clear:both" />
</div>
 
</g:if>   
        
   
           
           
        </div>
        <div id="footerwrap">
        <div id="footer">
            <p>Proyecto académico "Musgo" ,Universidad Nacional de Colombia, Ingenieria de software II 2012</p>
        </div>
        </div>
    </div>
</body>
</html>